<!-- eslint-disable no-mixed-spaces-and-tabs -->
<template>
  <div class="container">
    <h3 class="h3">使用draw绘制点、线、圆、多边形</h3>
    <h4>
      <el-select
        id="type"
        v-model="type"
        class="select"
      >
        <el-option
          v-for="item in tools"
          :key="item.value"
          :value="item.value"
        >{{ item.label }}</el-option>
      </el-select>
    </h4>

    <div id="vue-openlayers" />
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import LayerVector from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import Draw from 'ol/interaction/Draw'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
import Style from 'ol/style/Style'
import Circle from 'ol/style/Circle'
export default {
  data() {
    return {
      type: 'Polygon',
      tools: [
        {
          value: 'Point',
          label: '点'
        },
        {
          value: 'LineString',
          label: '线'
        },
        {
          value: 'Polygon',
          label: '多边形'
        },
        {
          value: 'Circle',
          label: '圆'
        },
        {
          value: 'None',
          label: '无'
        }
      ],
      map: null,
      draw: null,
      source: new SourceVector({
        wrapX: false
      })
    }
  },
  watch: {
    type(newVal) {
      this.addInteraction()
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 地图初始化加载
    initMap() {
      const raster = new Tile({
        source: new XYZ({
          url: 'http://{a-c}.tile.openstreetmap.de/{z}/{x}/{y}.png'
        })
      })

      const vector = new LayerVector({
        source: this.source,
        // Vector层显示的样式
        style: new Style({
          fill: new Fill({
            color: '#00f'
          }),
          stroke: new Stroke({
            width: 2,
            color: '#ff0'
          }),
          image: new Circle({ // 点样式
            radius: 5,
            fill: new Fill({
              color: '#ff0000'
            })
          })
        })
      })

      this.map = new Map({
        target: 'vue-openlayers',
        // 在地图容器中加载图层
        layers: [raster, vector],
        // 地图视图设置
        view: new View({
        // 投影坐标系
          projection: 'EPSG:4326',
          center: [113.1206, 23.034996],
          zoom: 10
        })
      })
      this.addInteraction()
    },

    addInteraction() {
      if (this.draw !== null) {
        this.map.removeInteraction(this.draw)
      }

      if (this.type !== 'None') {
        this.draw = new Draw({
          source: this.source,
          type: this.type,
          // Draw执行时采用的样式
          style: new Style({
            fill: new Fill({
              color: '#0f0'
            }),
            stroke: new Stroke({
			  width: 2,
			  color: '#f00'
            }),
			  image: new Circle({ // 点样式
			    radius: 5,
			    fill: new Fill({
			      color: '#00ff00'
			    })
			  })
		  })
        })
        this.map.addInteraction(this.draw)
      }
    }
  }
}
</script>
<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 550px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
.select{
  margin-left: 500px;
}
</style>
